<template>
	<view>
		<view class="nav nav_bar" style="background:#FFF">
			<uni-nav-bar left-icon="left" title="员工中心" :border='false' color="#333" background-color="#FFF"
				@clickLeft="$native.backAction()"></uni-nav-bar>
		</view>
		<view class="nav_box"></view>
		<view class="store_tab">
			<scroll-view :scroll-x="true" :show-scrollbar="false">
				<view class="controller flex_center" style='width: 740rpx;' :id="tab == 5 ? 'theamColor' : ''">
					<view class="btn flex_c" v-for="(item,index) in icon" :key="index" @click="onTab(index)"
						:id="tab == index ? 'select' : ''">
						<image :src="item.icon" mode="aspectFill"></image>
						<text>{{item.title}}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<order v-if="tab == 0" ref="order"></order>
		<income v-if="tab == 1" ref="income"></income>

	</view>
</template>

<script>
	import order from './order.vue';
	import income from './income.vue';
	export default {
		components: {
			order,
			income,
		},
		data() {
			return {
				icon: [{
						"title": "订单",
						"icon": "/static/store/store_order.png",
						"compents": ''
					},
					{
						"title": "收益",
						"icon": "/static/store/store_income.png",
						"compents": ''
					},
				],

				tab: 0,
			}
		},
		methods: {
			onTab(e) {
				this.tab = e;
			},
		},

		onReachBottom() {
			if (this.tab == 0) {
				// 订单
				this.$refs.order.getMore()
			}

			if (this.tab == 1) {
				// 收益
				this.$refs.income.getMore();
			}
		},

		async onPullDownRefresh() {
			if (this.tab == 0) {
				// 订单
				await this.$refs.order.refresh();
			}
			if (this.tab == 1) {
				// 收益
				await this.$refs.income.refresh();
			}
		}
	}
</script>

<style lang="less" scoped>
	.store_tab {
		position: -webkit-sticky;
		/* Safari */
		position: sticky;
		top: calc(var(--paging-head-top) + 44px);
		left: 0;
		z-index: 10;

		scroll-view {
			width: 100vw;
			white-space: nowrap
		}

		.controller {
			padding: 32rpx;
			background: #ECECF4;

			.btn {
				width: 120rpx;
				height: 128rpx;
				background: #F7F7F9;
				border-radius: 24rpx;
				border: 2rpx solid #ECECED;
				padding-top: 14rpx;
				margin-right: 16rpx;

				image {
					width: 56rpx;
					height: 56rpx;
					margin-bottom: 6rpx;
				}

				text {
					font-size: 28rpx;
					color: #131313;
				}
			}

			#select {
				background: #FFF7F8;
				border: 2rpx solid #FD2A53;
			}
		}
	}
</style>